<template>
  <div class="div-dropdown-wrapper">
      <span class="span-top-arrow"></span>

      <div class="div-dropdown-list-wrapper">
          <slot></slot>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

@import "../../App";

$top-arrow-size:15px;

@mixin dropdown-shadow{
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

.div-dropdown-wrapper{
    text-align:center;
}

.span-top-arrow{
    width: $top-arrow-size;
    height: $top-arrow-size/2;

    // to enable width & height control
    display: inline-block;

    // or overflow won't hidden
    position: absolute;

    transform: translate(-50%,0);

    overflow: hidden;
}

.span-top-arrow::after{
    content: "";
    width: $top-arrow-size/1.414;
    height: $top-arrow-size/1.414;
    background-color: white;
    position: absolute;

    // translate to move to center and then rotate.
    transform: translate(-50%,2px) rotate(45deg);
}

.div-dropdown-list-wrapper{
    background-color: white;

    border-radius: 5px;

    margin-top: $top-arrow-size/2;

    padding: 5px 0;

    @include dropdown-shadow();
}

</style>